<template>
  <div class="home-container">
    <Carousel />
    <!-- 服务板块 -->
    <div class="service-container">
      <h1 class="header">名扬云提供了什么服务</h1>
      <div class="desc">
        名扬云为各企业及客户提供了短信、短网址、服务器和储存等一系列服务
      </div>
      <div class="item-container">
        <div v-for="item in serviceItems" :key="item.id" class="item">
          <img :src="item.src" alt="" />
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <!-- 不同行业解决方案模块 -->
    <div class="industry-container">
      <h1 class="header">致力于为不同行业提供解决方案</h1>
      <div class="desc">精益求精,提供全方位解决方案</div>
      <div class="main">
        <div class="title">
          <RouterLink
            v-for="item in industryItems"
            :key="item.link"
            :to="{ name: item.name }"
            class="area-item"
            active-class="area-selected"
          >
            <div>{{ item.title }}</div>
          </RouterLink>
        </div>
        <div class="body">
          <RouterView />
        </div>
      </div>
    </div>
    <!-- 名扬云的服务优势 -->
    <div class="adv-container">
      <div class="header">名扬云服务的优势</div>
      <div class="main">
        <div class="item" v-for="item in advItems" :key="item.title">
          <div class="icon">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="content">
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客户及合作伙伴 -->
    <div class="partner-container">
      <div class="title">客户及合作伙伴</div>
      <div class="desc">为客户提供安全、稳定、高效的云服务平台</div>
      <div class="body">
        <div class="item" v-for="item in partnerItems" :key="item.imgSrc">
          <img :src="item.imgSrc" alt="" />
        </div>
      </div>
    </div>
    <!-- 开始使用名扬云 -->
    <div class="start-container">
      <div class="title">开始使用名扬云服务</div>
      <RouterLink :to="{ name: 'Login' }">
        <div class="login">登录</div>
      </RouterLink>
    </div>
    <!-- 关于公司 -->
    <div class="about-container">
      <div class="about-item" v-for="item in aboutItems" :key="item.imgSrc">
        <div class="logo">
          <img :src="item.imgSrc" alt="" />
        </div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel";
export default {
  data() {
    return {
      serviceItems: [
        {
          id: "info",
          src: require("@/assets/index/service/info.png"),
          title: "短信",
          desc: "提供短信验证码、营销短信、通知短信的发送",
        },
        {
          id: "link",
          src: require("@/assets/index/service/link.png"),
          title: "短网址",
          desc: "",
        },
        {
          id: "machine",
          src: require("@/assets/index/service/machine.png"),
          title: "服务器及流量",
          desc: "",
        },
        {
          id: "storage",
          src: require("@/assets/index/service/storage.png"),
          title: "存储及流量",
          desc: "",
        },
        {
          id: "other",
          src: require("@/assets/index/service/other.png"),
          title: "其他服务",
          desc: "",
        },
      ],
      industryItems: [
        {
          name: "Proservice",
          title: "物业服务行业",
          exact: false,
        },
        {
          name: "Electricity",
          title: "电商行业",
          exact: false,
        },
        {
          name: "Education",
          title: "教育行业",
          exact: false,
        },
        {
          name: "Computer",
          title: "计算机行业",
          exact: false,
        },
      ],
      advItems: [
        {
          imgUrl: require("@/assets/index/advantage/adv1.png"),
          title: "响应快",
          desc: "快速响应,支持海量并发,满足您的使用需求",
        },
        {
          imgUrl: require("@/assets/index/advantage/adv2.png"),
          title: "使用更简单",
          desc: "在线平台,即买即用,提供API接口快速接入,直接明了轻松上手",
        },
        {
          imgUrl: require("@/assets/index/advantage/adv3.png"),
          title: "数据统计精准",
          desc: "强大的数据分析功能,多点采集,可视化图标呈现",
        },
        {
          imgUrl: require("@/assets/index/advantage/adv4.png"),
          title: "管理灵活高效",
          desc: "灵活管理API,白名单,分析报告等功能提高您的效率",
        },
        {
          imgUrl: require("@/assets/index/advantage/adv5.png"),
          title: "服务质量可靠",
          desc: "服务稳定,保证每个API服务器能提供数据服务",
        },
        {
          imgUrl: require("@/assets/index/advantage/adv6.png"),
          title: "价格合理",
          desc: "定价公开透明,根据自身需求合理购买,买多少用多少",
        },
      ],
      partnerItems: [
        {
          imgSrc: require("@/assets/index/company/cpn1.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn2.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn3.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn4.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn5.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn6.png"),
        },
        {
          imgSrc: require("@/assets/index/company/cpn7.png"),
        },
      ],
      aboutItems: [
        {
          imgSrc: require("@/assets/index/about/anytime.png"),
          title: "7×24小时服务支持",
        },
        {
          imgSrc: require("@/assets/index/about/price.png"),
          title: "价格公开透明",
        },
        {
          imgSrc: require("@/assets/index/about/count.png"),
          title: "灵活计费",
        },
        {
          imgSrc: require("@/assets/index/about/serve.png"),
          title: "专属客服服务",
        },
      ],
    };
  },
  components: {
    Carousel,
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.home-container {
  // 服务板块
  .service-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 360px;
    color: #333;
    height: 476px;
    box-sizing: border-box;
    .header {
      font-size: 36px;
      margin: 0;
      margin-bottom: 16px;
    }
    .desc {
      font-size: 18px;
      margin-bottom: 36px;
    }
    .item-container {
      display: flex;
      column-gap: 25px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 220px;
        height: 220px;
        box-shadow: 0px 0px 16px 0px rgba(22, 140, 250, 0.12);
        border-radius: 12px;
        font-weight: bold;
        padding: 35px 16px 27px;
        box-sizing: border-box;
        row-gap: 16px;
        transition: 0.3s;
        &:hover {
          transform: translateY(-12px);
        }
        img {
          width: 64px;
          height: 64px;
        }
        .item-desc {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  // 不同行业解决方案模块
  .industry-container {
    box-sizing: border-box;
    width: 100%;
    height: 859px;
    background: url(~@/assets/index/industry.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    padding: 64px 360px 147px;
    .header {
      font-size: 36px;
      margin: 0;
      margin-bottom: 16px;
    }
    .desc {
      font-size: 18px;
      margin-bottom: 36px;
    }
    .main {
      background-color: #fff;
      width: 1200px;
      height: 520px;
      color: #333;
      border-radius: 12px;
      box-sizing: border-box;
      .title {
        display: flex;
        justify-content: space-around;
        padding: 0 100px;
        border-bottom: 1px solid #ededed;
        height: 80px;
        .area-item {
          height: 80px;
          line-height: 80px;
        }
        .area-selected {
          border-bottom: 3px solid @primary;
          color: @primary;
        }
      }
      .body {
        text-align: center;
      }
    }
  }
  // 名扬云的服务优势
  .adv-container {
    width: 100%;
    height: 512px;
    background-color: #f8fbff;
    padding: 64px 360px;
    box-sizing: border-box;
    .header {
      font-size: 40px;
      text-align: center;
      margin-bottom: 36px;
    }
    .main {
      display: grid;
      grid-template-columns: repeat(3, 384px);
      gap: 20px 40px;
      justify-content: center;
      .item {
        background-color: #fff;
        border-radius: 12px;
        display: flex;
        border: 1px solid #ededed;
        padding: 32px;
        box-sizing: border-box;
        height: 134px;
        .icon {
          width: 64px;
          height: 64px;
          flex: 1 0 auto;
          margin-right: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          display: flex;
          flex-direction: column;
          row-gap: 8px;
          .title {
            font-size: 16px;
            color: #333;
          }
          .desc {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
  // 客户及合作伙伴
  .partner-container {
    height: 334px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 360px;
    box-sizing: border-box;
    .title {
      font-size: 34px;
    }
    .desc {
      color: #666;
      margin-bottom: 36px;
      margin-top: 16px;
    }
    .body {
      display: flex;
      column-gap: 12px;
    }
  }
  // 开始使用名扬云
  .start-container {
    width: 100%;
    height: 240px;
    background: url("~@/assets/index/start.png");
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 32px;
      color: #fff;
    }
    .login {
      width: 220px;
      height: 48px;
      background-color: #fff;
      color: @primary;
      line-height: 48px;
      text-align: center;
      border-radius: 6px;
    }
  }
  // 关于公司
  .about-container {
    background-color: #303030;
    color: #fff;
    padding: 56px 420px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .about-item {
      display: flex;
      column-gap: 16px;
      align-items: center;
      .logo {
        width: 48px;
        height: 48px;
      }
    }
  }
}
</style>